<template>
  <el-dialog
    v-model="visible"
    title="LSAM 神经网络智能预警"
    width="70%"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    custom-class="tech-dialog"
  >
    <div class="dialog-content lsam-dashboard">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="tech-card" shadow="always">
            <template #header>
              <div class="card-header">
                <span><i class="el-icon-cpu"></i> 核心风险评估</span>
              </div>
            </template>
            <div class="risk-gauge">
              <el-progress
                type="dashboard"
                :percentage="currentRisk.percentage"
                :color="currentRisk.color"
                :stroke-width="12"
              >
                <template #default>
                  <div class="percentage-value-large">
                    {{ currentRisk.percentage.toFixed(1) }}%
                  </div>
                  <div class="percentage-label">综合风险指数</div>
                </template>
              </el-progress>
            </div>
            <div class="warning-level-box" :class="currentRisk.levelClass">
              <div class="warning-level-title">
                {{ currentRisk.levelName }}
              </div>
              <div class="warning-factors">
                主要诱因: {{ currentRisk.factors.join(", ") }}
              </div>
            </div>
          </el-card>

          <el-card class="tech-card" shadow="always" style="margin-top: 20px">
            <template #header>
              <div class="card-header">
                <span><i class="el-icon-data-line"></i> 监测数据源状态</span>
              </div>
            </template>
            <el-descriptions :column="1" border>
              <el-descriptions-item
                v-for="source in dataSourceStatus"
                :key="source.name"
              >
                <template #label>
                  <i :class="source.icon"></i>
                  {{ source.name }}
                </template>
                <el-tag
                  :type="source.status === 'normal' ? 'success' : 'danger'"
                  effect="dark"
                  class="data-source-tag"
                >
                  {{ source.status === 'normal' ? '正常' : '异常' }}
                </el-tag>
                <span class="data-source-value">{{ source.value }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>

        <el-col :span="16">
          <el-card class="tech-card" shadow="always">
            <template #header>
              <div class="card-header">
                <span><i class="el-icon-magic-stick"></i> LSAM 神经网络位移预测</span>
              </div>
            </template>
            <div ref="lsamChartRef" style="width: 100%; height: 450px"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed, nextTick } from "vue";
import { ElMessage } from "element-plus";

// 引入 ECharts
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

// 注册 ECharts 组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

// --- 弹窗控制 ---
const visible = ref<boolean>(false);

const open = () => {
  visible.value = true;
  // DOM 渲染后初始化图表
  nextTick(() => {
    initChart();
  });
};

const close = () => {
  visible.value = false;
};

defineExpose({ open, close });

// --- 模拟数据 (Mock Data) ---

// 1. 核心风险指标
const mockRiskPercentage = ref(76.5); // 模拟一个风险值

const currentRisk = computed(() => {
  const p = mockRiskPercentage.value;
  if (p > 85) {
    return {
      percentage: p,
      color: "#F56C6C",
      levelName: "Ⅰ级 高危预警",
      levelClass: "level-red",
      factors: ["连续加速", "强降雨"],
    };
  } else if (p > 60) {
    return {
      percentage: p,
      color: "#E6A23C",
      levelName: "Ⅱ级 橙色预警",
      levelClass: "level-orange",
      factors: ["GNSS-03 加速", "InSAR 区域沉降"],
    };
  } else if (p > 40) {
    return {
      percentage: p,
      color: "#409EFF",
      levelName: "Ⅲ级 蓝色预警",
      levelClass: "level-blue",
      factors: ["GNSS-01 轻微加速"],
    };
  } else {
    return {
      percentage: p,
      color: "#67C23A",
      levelName: "Ⅳ级 正常",
      levelClass: "level-green",
      factors: ["无"],
    };
  }
});

// 2. 数据源状态
const dataSourceStatus = reactive([
  {
    name: "GNSS 监测点",
    icon: "el-icon-location-outline",
    status: "normal",
    value: "15 / 15 正常",
  },
  {
    name: "InSAR 监测面",
    icon: "el-icon-picture-outline",
    status: "normal",
    value: "数据已更新",
  },
  {
    name: "降雨计",
    icon: "el-icon-heavy-rain",
    status: "normal",
    value: "0.5 mm/h",
  },
]);

// 3. ECharts 图表
const lsamChartRef = ref<HTMLElement | null>(null);
let lsamChart: echarts.ECharts | null = null;

// 模拟图表数据
const mockChartData = {
  categories: [
    "11-01", "11-02", "11-03", "11-04", "11-05", "11-06", "11-07", "11-08(预测)",
  ],
  actual: [10, 12, 11, 15, 18, 22, 25, null], // 实际位移
  predicted: [null, null, null, null, 17, 21, 26, 31], // 神经网络预测位移
};

const initChart = () => {
  if (lsamChartRef.value && !lsamChart) {
    lsamChart = echarts.init(lsamChartRef.value, "dark"); // 使用 dark 主题
  }

  if (lsamChart) {
    const option = {
      backgroundColor: "transparent",
      title: {
        text: "累计位移 (mm) - 预测 vs 实际",
        left: "center",
        top: "0%", /* 标题位置更高 */
        textStyle: {
          color: "#E0F2FF",
          fontSize: 18, /* 增大标题字体 */
          fontWeight: 'bold'
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["实测累计位移", "LSAM 预测位移"],
        top: 35, /* 调整图例位置，避免与标题重叠 */
        right: 20, /* 挪到右上角 */
        textStyle: {
          color: "#E0F2FF",
          fontSize: 14, /* 增大图例字体 */
        },
        itemGap: 25, /* 增加图例间隔 */
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        top: "20%", /* 给标题和图例留出更多空间 */
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: mockChartData.categories,
        axisLine: {
          lineStyle: {
            color: "#4A5E7A",
          },
        },
        axisLabel: {
          color: "#E0F2FF",
        },
      },
      yAxis: {
        type: "value",
        name: "位移 (mm)", /* 增加单位 */
        nameTextStyle: {
            color: "#E0F2FF",
            fontSize: 12
        },
        axisLine: {
          lineStyle: {
            color: "#4A5E7A",
          },
        },
        axisLabel: {
          color: "#E0F2FF",
        },
        splitLine: {
          lineStyle: {
            color: "#2C3E50",
            type: "dashed" /* 分割线改为虚线，增加科技感 */
          },
        },
      },
      series: [
        {
          name: "实测累计位移",
          type: "line",
          smooth: true,
          data: mockChartData.actual,
          symbolSize: 8,
          lineStyle: {
            color: "#409EFF",
            width: 3,
          },
          itemStyle: {
            color: "#409EFF",
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(64, 158, 255, 0.3)" },
              { offset: 1, color: "rgba(64, 158, 255, 0.0)" },
            ]),
          },
        },
        {
          name: "LSAM 预测位移",
          type: "line",
          smooth: true,
          data: mockChartData.predicted,
          symbolSize: 8,
          lineStyle: {
            color: "#F56C6C",
            width: 3,
            type: "dashed",
          },
          itemStyle: {
            color: "#F56C6C",
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(245, 108, 108, 0.3)" },
              { offset: 1, color: "rgba(245, 108, 108, 0.0)" },
            ]),
          },
        },
      ],
    };
    lsamChart.setOption(option);
  }
};
</script>

<style scoped>
/* 使用 :deep() 穿透 Element Plus 的样式，
  或者在 el-dialog 上使用 custom-class
*/

/* 科技感卡片 */
.tech-card {
  background-color: #0d1b33;
  border: 1px solid #1a3a68;
  color: #c0dfff;
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* 更深的阴影 */
}

/* :deep() 用于修改子组件的样式 */
:deep(.tech-card .el-card__header) {
  background-color: #11264a;
  border-bottom: 1px solid #1a3a68;
  color: #3a8dff;
  font-weight: bold;
  font-size: 16px;
  text-shadow: 0 0 5px rgba(58, 141, 255, 0.5);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

:deep(.tech-card .el-descriptions) {
  background-color: #0d1b33;
}
:deep(.tech-card .el-descriptions__label) {
  color: #a0cfff;
  background-color: #11264a;
}
:deep(.tech-card .el-descriptions__content) {
  color: #c0dfff;
  background-color: #0d1b33;
}
:deep(.tech-card .el-descriptions-item__cell) {
  border-color: #1a3a68 !important;
}

.data-source-value {
  float: right;
  color: #aaa;
  font-size: 13px;
  margin-left: 10px; /* 调整间距 */
}

/* 数据源标签样式 */
.data-source-tag {
  border: none;
  background-color: rgba(58, 141, 255, 0.2); /* 更柔和的背景 */
  color: #a0cfff;
  font-weight: bold;
  padding: 0 8px;
  height: 28px; /* 统一高度 */
  line-height: 26px;
  border-radius: 4px;
}
.data-source-tag.el-tag--success {
  background-color: rgba(103, 194, 58, 0.2);
  color: #67c23a;
}
.data-source-tag.el-tag--danger {
  background-color: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
}


/* 风险仪表盘 */
.risk-gauge {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.percentage-value-large { /* 增大字体 */
  font-size: 30px;
  font-weight: bold;
  color: #e0f2ff;
  text-shadow: 0 0 10px rgba(224, 242, 255, 0.8); /* 增加发光效果 */
}
.percentage-label {
  font-size: 10px;
  color: #a0cfff;
  margin-top: 5px;
}

/* 预警等级框 */
.warning-level-box {
  padding: 18px; /* 增加内边距 */
  border-radius: 8px; /* 更圆润的边角 */
  text-align: center;
  margin-top: 20px; /* 增加顶部间距 */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* 增加阴影 */
  position: relative;
  overflow: hidden; /* 隐藏伪元素溢出 */
}
.warning-level-title {
  font-size: 24px; /* 增大标题字体 */
  font-weight: bold;
  position: relative;
  z-index: 1; /* 确保文字在背景上 */
}
.warning-factors {
  font-size: 14px;
  margin-top: 8px; /* 增加间距 */
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

/* 预警等级颜色和更强的呼吸灯动画 */
.level-red {
  background-color: rgba(245, 108, 108, 0.1); /* 更浅的背景 */
  border: 2px solid #f56c6c; /* 更粗的边框 */
  color: #f56c6c;
  text-shadow: 0 0 10px rgba(245, 108, 108, 0.8);
  animation: pulse-red 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
.level-red::before { /* 增加一个伪元素作为内部光晕 */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(245, 108, 108, 0.3) 0%, transparent 70%);
  animation: glow-pulse-red 2s infinite cubic-bezier(0.0, 0, 0.8, 1);
  opacity: 0;
}
@keyframes glow-pulse-red {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(0.8); opacity: 0; }
}
@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.7);
  }
  70% {
    box-shadow: 0 0 15px 15px rgba(245, 108, 108, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
  }
}


.level-orange {
  background-color: rgba(230, 162, 60, 0.1);
  border: 2px solid #e6a23c;
  color: #e6a23c;
  text-shadow: 0 0 8px rgba(230, 162, 60, 0.7);
  animation: pulse-orange 2.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
.level-orange::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(230, 162, 60, 0.2) 0%, transparent 70%);
  animation: glow-pulse-orange 2.5s infinite cubic-bezier(0.0, 0, 0.8, 1);
  opacity: 0;
}
@keyframes glow-pulse-orange {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); opacity: 0.6; }
  100% { transform: scale(0.8); opacity: 0; }
}
@keyframes pulse-orange {
  0% {
    box-shadow: 0 0 0 0 rgba(230, 162, 60, 0.5);
  }
  70% {
    box-shadow: 0 0 10px 10px rgba(230, 162, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(230, 162, 60, 0);
  }
}


.level-blue {
  background-color: rgba(64, 158, 255, 0.1);
  border: 1px solid #409eff;
  color: #409eff;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
  animation: none; /* 蓝色和绿色不闪 */
}
.level-green {
  background-color: rgba(103, 194, 58, 0.1);
  border: 1px solid #67c23a;
  color: #67c23a;
  box-shadow: 0 0 5px rgba(103, 194, 58, 0.5);
  animation: none;
}
</style>

<style>
/* 这里放全局样式来修改 el-dialog 的背景，
  因为 scoped 样式无法穿透到 dialog 的根
  我们使用 custom-class="tech-dialog" 来限定
*/
.tech-dialog {
  background: linear-gradient(
    145deg,
    #0c1a2f,
    #132544
  ) !important; /* 深蓝渐变背景 */
  border-radius: 12px; /* 弹窗整体圆角 */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7) !important; /* 更强的弹窗阴影 */
}

.tech-dialog .el-dialog__title {
  color: #3a8dff;
  text-shadow: 0 0 12px rgba(58, 141, 255, 0.8);
  font-size: 22px; /* 标题字体更大 */
  font-weight: bold;
}

.tech-dialog .el-dialog__header {
  background-color: #0a1931;
  border-bottom: 1px solid #1a3a68;
  padding: 20px 25px; /* 增加内边距 */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.tech-dialog .el-dialog__headerbtn .el-dialog__close {
    color: #a0cfff; /* 关闭按钮颜色 */
    font-size: 20px;
}
.tech-dialog .el-dialog__headerbtn:focus .el-dialog__close,
.tech-dialog .el-dialog__headerbtn:hover .el-dialog__close {
    color: #409EFF; /* 鼠标悬停变色 */
}

.tech-dialog .el-dialog__body {
  background-color: #0a1931;
  padding: 20px; /* 统一内边距 */
}

</style>